<template>
    <div>


      <el-container>
        <div id="lay">
        <el-main>
          <div class="shiming" style="margin-left: 10px;height: 40px;line-height: 38px;font-size: 25px">
            实名认证
          </div>
          <el-divider ></el-divider>

          <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px">
            <el-form-item label="真实姓名" prop="name">
              <el-input style="float: left;width: 500px" v-model="ruleForm.name" placeholder="请输入真实姓名"></el-input>
              <div class="font1" style="float: left;margin-left: 10px;color: #BFC4CC">审核通过后不可更改</div>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">

              <el-input v-model="ruleForm.phone" style="float: left;width: 500px" placeholder="请输入手机号"></el-input>
              <div class="font1" style="float: left;margin-left: 10px;color: #BFC4CC">审核后将绑定到云音乐账号中</div>
            </el-form-item>
            <el-form-item label="国家地区" prop="region">
              <el-select style="width: 500px;float: left" v-model="ruleForm.region" placeholder="中国 China">
                <el-option label="中国香港Hong Kong" value="xianggang"></el-option>
                <el-option label="日本 Japan" value="Japan"></el-option>
              </el-select>
              <div class="font3" style="float: left;margin-left: 10px;color: #BFC4CC">审核通过后不可更改</div>
            </el-form-item>
            <el-form-item label="证件号码" prop="number">
              <el-input v-model="ruleForm.number" style="width: 500px;float: left" placeholder="请输入证件号码"></el-input>
              <div class="font4" style="float:left;margin-left: 10px;color: #BFC4CC">审核通过后不可更改</div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">提交审核</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>

            </el-form-item>
          </el-form>
        </el-main>
        </div>
      </el-container>
    </div>
</template>

<script>
    export default {
      data() {
        return {
          ruleForm: {

          },
          rules: {
            name: [
              { required: true, message: '请输入活动名称', trigger: 'blur' },
              { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            region: [
              { required: true, message: '请选择活动区域', trigger: 'change' }
            ],
            phone: [
              { required: true, message: '请输入手机号', trigger: 'change' },
              { min: 11, max: 11, message: '长度为11个字符', trigger: 'blur' }
            ],
            number: [
              { required: true, message: '请填写活动形式', trigger: 'blur' }
            ]
          }
        }
      },
      methods: {
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              console.log(this.ruleForm)
              alert('submit!');
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        }
      }

    }
</script>

<style scoped>
  .el-header {
    background-color: black;
    color: #333;
    text-align: center;
    line-height: 60px;
    margin-top: -60px;
  }



  .el-main {
    background-color: white;
    color: #333;
    text-align: center;
    line-height: 160px;
    width: 80%;
    margin-left: 310px;
  }

.font{
  height:70px;
  color: white;
  float: left;
  line-height: 66px;
}
  .el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 18px 0;
    margin-top: 10px;
    background-color: red;
  }

  .el-input__inner {
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 70%;
    margin-left: -200px;
  }
  .el-select .el-input .el-select__caret {
    color: #C0C4CC;
    font-size: 14px;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    transition: transform .3s,-webkit-transform .3s;
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
    cursor: pointer;
    margin-left: -410px;
  }
  .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 13px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
</style>
